//路由用css
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
// html{
//     background: #fff;
//     // max-width: 760px;
//     // position: relative;
//     // margin: 0 auto;
//     height: 100%;
// }
// body{
//     font-family: Arial, Helvetica, sans-serif;
//     background: #f7f7f7;
//     position: absolute;
//     width: 100%;
//     height: 100%;
//     // overflow:hidden;
// }

#pageloading{
    background:url(/images/loading1.gif) no-repeat center center;
    position:absolute;
    top:0;left:0;right:0;bottom:0;width:100%;height:100%;
}
//最外面的层 container-box class或id
.container-box{ //mB为底部fiex间距
    //margin-bottom: 0.55rem;
    // max-width: 760px;
    // margin: 0 auto;
    font-size: 0.14rem;
    color: #333;
}

.router-container{
    width: 100%;
    height: 100%;
    position: absolute;
    // left:100%;
    left:0;
    top:0;
    opacity: 1;
    overflow: hidden;


    -webkit-transition:.4s;
    transition:.4s;
    background-color: #fff;
    // display:none;

    -webkit-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);
}

// key frame帧动画完整
// -webkit-animation-name: anim-routerin;
// animation-name: anim-routerin;
// -webkit-animation-duration: 0.4s;
// animation-duration: 0.4s;
// -webkit-animation-fill-mode: forwards;
// animation-fill-mode: forwards;
.router-container-block{
    z-index: 5;

    // 第一种方法，性能最好
    // display:block;

    // 第二种方法，性能最差，放开下面的 key frame动画
    // pc演示效果很好，iphone6s也不错，华为MATE8动画帧数小于30，影响展示效果
    // -webkit-animation: anim-routerin 0.4s forwards;

    // 第三种方法，性能中等，可以在小米2a环境下正常展示，华为mate8效果较好，moto x+1效果也不错
    // left: 0;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.router-container-reblock{
    z-index: 5;

    // 第一种方法，性能最好
    // display:block;


    // 第二种方法，性能最差，放开下面的 key frame动画
    // -webkit-animation: anim-routerin2 0.4s forwards;

    // 第三种方法，性能中等，可以在小米2a环境下正常展示，华为mate8效果较好，moto x+1效果也不错
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.router-container-hidden{
    z-index: 10;

    // 第一种方法，性能最好
    // display:none;


    // 第二种方法，性能最差，放开下面的 key frame动画
    // -webkit-animation: anim-routerout 0.8s forwards;
    // box-shadow: 5px 5px 20px #888;

    // 第三种方法，性能中等，可以在小米2a环境下正常展示，华为mate8效果较好，moto x+1效果也不错
    // left: -100%;
    -webkit-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
}

.router-container-rehidden{
    z-index: 10;

    // 第一种方法，性能最好
    // display:none;


    // 第二种方法，性能最差，放开下面的 key frame动画
    // -webkit-animation: anim-routerout2 0.8s forwards;
    // box-shadow: -5px -5px 20px #888;

    // 第三种方法，性能中等，可以在小米2a环境下正常展示，华为mate8效果较好，moto x+1效果也不错
    // left: 100%;
    -webkit-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);
}


// 使用第二种方式动画，放开下面的代码
// @-webkit-keyframes anim-routerin {
// 	0% { -webkit-transform: translate3d(120%,0,0); opacity: 1; z-index: 5}
// 	100% { -webkit-transform: translate3d(0,0,0); opacity: 1; z-index: 5 }
// }
//
// @keyframes anim-routerin {
// 	0% { -webkit-transform: translate3d(120%,0,0); opacity: 1; z-index: 5 }
// 	100% { -webkit-transform: translate3d(0,0,0); opacity: 1; z-index: 5 }
// }
//
// @-webkit-keyframes anim-routerin2 {
// 	0% { -webkit-transform: translate3d(-120%,0,0); opacity: 1; z-index: 5}
// 	100% { -webkit-transform: translate3d(0,0,0); opacity: 1; z-index: 5 }
// }
//
// @keyframes anim-routerin2 {
// 	0% { -webkit-transform: translate3d(-120%,0,0); opacity: 1; z-index: 5 }
// 	100% { -webkit-transform: translate3d(0,0,0); opacity: 1; z-index: 5 }
// }
//
// @-webkit-keyframes anim-routerout {
// 	0% { -webkit-transform: translate3d(0,0,0); opacity: 1; z-index: 10 }
// 	// 50% { transform: translate3d(-1000,0,0); opacity: 0 }
// 	100% { -webkit-transform: translate3d(-120%,0,0); opacity: 1; z-index: 10 }
// }
//
// @keyframes anim-routerout {
// 	0% { -webkit-transform: translate3d(0,0,0); opacity: 1; z-index: 10 }
//     // 50% { transform: translate3d(-1000,0,0); opacity: 0 }
// 	100% { -webkit-transform: translate3d(-120%,0,0); opacity: 1; z-index: 10 }
// }
//
// @-webkit-keyframes anim-routerout2 {
// 	0% { -webkit-transform: translate3d(0,0,0); opacity: 1; z-index: 10 }
// 	// 50% { transform: translate3d(-1000,0,0); opacity: 0 }
// 	100% { -webkit-transform: translate3d(120%,0,0); opacity: 1; z-index: 10 }
// }
//
// @keyframes anim-routerout2 {
// 	0% { -webkit-transform: translate3d(0,0,0); opacity: 1; z-index: 10 }
//     // 50% { transform: translate3d(-1000,0,0); opacity: 0 }
// 	100% { -webkit-transform: translate3d(120%,0,0); opacity: 1; z-index: 10 }
// }
